<!-- 用户管理 -->
<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="app-title">用户管理</div>
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="用户账号"><el-input v-model="formInline.username" clearable placeholder="请输入用户账号查询" @change="sousuo()"></el-input></el-form-item>
				<el-form-item label="物业公司">
					<el-select v-model="formInline.wuye_id" placeholder="请选择" clearable @change="sousuo()">
						<el-option :label="item.wy_name" :value="item.id" v-for="(item, index) in wuyeList" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item><el-button type="primary" @click="sousuo()" icon="el-icon-search">查询/筛选</el-button></el-form-item>
				<el-form-item><el-button type="success" @click="setItem ='';isAdd = true" icon="el-icon-circle-plus-outline">添加用户</el-button></el-form-item>
			</el-form>

			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="username" label="用户账号"></el-table-column>
				<el-table-column prop="real_name" label="真实姓名"></el-table-column>
				<el-table-column prop="juwei_name" label="居委名称"></el-table-column>
				<el-table-column prop="wy_name" label="物业公司"></el-table-column>
				<el-table-column prop="xq_names" label="小区"></el-table-column>
				<!-- <el-table-column prop="shuliang" label="用户数量"></el-table-column> -->
				<el-table-column label="用户类型">
					<template slot-scope="scope">
						{{userType[scope.row.user_type]}}
					</template>
				</el-table-column>
				<el-table-column label="用户权限">
					<template slot-scope="scope">
						{{scope.row.roleNames}}
					</template>
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.state == 1">正常</el-tag>
						<el-tag v-else-if="scope.row.state == 2" type="danger">禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createtime" label="创建时间" width="100px"></el-table-column>
				<el-table-column label="操作" width="120px">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="openResetpass(scope.row.id)">重置密码</el-button>
						<!-- <el-button type="text" size="small" @click="openInfo(scope.row)">详情</el-button> -->
						<el-button type="text" size="small" @click="openSet(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="el-pagination">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page"
					:page-sizes="[10, 100, 200, 300, 400]"
					:page-size="size"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</div>
		
		<el-dialog
		  title="用户信息"
		  :visible.sync="dialogVisible"
		  width="500px">
		  <el-form ref="form" :model="item" label-width="120px">
		    <el-form-item label="用户账号">
		      <el-input readonly v-model="item.username"></el-input>
		    </el-form-item>
			<el-form-item label="真实姓名">
			  <el-input readonly v-model="item.real_name"></el-input>
			</el-form-item>
			<el-form-item label="物业公司">
			  <el-input readonly v-model="item.wy_name"></el-input>
			</el-form-item>
			<el-form-item label="所属小区">
			  <el-input readonly v-model="item.xq_name"></el-input>
			</el-form-item>
			<el-form-item label="用户权限">
			   <el-input readonly v-model="item.user_type"></el-input>
			</el-form-item>
			<el-form-item label="用户邮箱">
			  <el-input readonly v-model="item.mailbox"></el-input>
			</el-form-item>
			<el-form-item label="创建时间">
			  <el-input readonly v-model="item.createtime"></el-input>
			</el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">返回</el-button>
		    <el-button type="primary" @click="openResetpass(item.id)">重置密码</el-button>
		  </span>
		</el-dialog>
		<user-add v-if="isAdd" :item="setItem"></user-add>
	</div>
</template>

<script>
import Api from '@/api/pages/wuye/user.js';
import wuyeApi from '@/api/pages/wuye/wuye.js';
import userAdd from './user-add.vue';
export default {
	name: 'wuye-user',
	components:{userAdd},
	data() {
		return {
			isAdd:false,
			dialogVisible:false,
			item:'',
			formInline: {
				username: '',
				wuye_id: '',
			},
			form: {},
			page: 1,
			size: 10,
			total: 0,
			tableData: [],
			wuyeList: [],
			userType:{
				'3':'居委管理员',
				'4':'居委成员'
			},
			setItem:''
		};
	},
	mounted() {
		this.getData();
		this.getWuyeList();
	},
	methods: {
		getData() {
			let data = {
				pageNumber: this.page,
				pageSize: this.size
			};
			if (this.formInline.username) {
				data['username'] = this.formInline.username.trim();
			}
			if (this.formInline.wuye_id) {
				data['wy_id'] = this.formInline.wuye_id;
			}
			Api.wuyeJwUserQuery(data).then(res => {
				if (res.state) {
					this.tableData = res.data.list;
					this.total = res.data.totalRow;
				} else {
					this.$message(res.msg);
				}
			});
		},
		// 修改搜索状态
		upallow(id) {
			Api.upallow({
				xiaoqu_id: id
			}).then(res => {
				if (res.state) {
					this.$message({
					  message: res.msg,
					  type: 'success'
					});
				} else {
					this.$message(res.msg);
				}
				this.getData();
			});
		},
		// 获取物业公司
		getWuyeList() {
			wuyeApi.getWuyeList().then(res => {
				if (res.state) {
					this.wuyeList = res.data;
				} else {
					this.$message(res.msg);
				}
			});
		},
		
		sousuo() {
			this.page = 1;
			this.getData();
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.size = val;
			this.getData();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.page = val;
			this.getData();
		},
		openInfo(item) {
			let data = JSON.parse(JSON.stringify(item))
			if(data.user_type == 1) {
				data.user_type = '超级管理员'
			}else{
				data.user_type = '普通管理员'
			}
			this.item = data;
			this.dialogVisible = true;
		},
		// 打开重置密码询问
		openResetpass(id) {
			this.$confirm('您确定要重置该用户密码为【123456】吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.resetpass(id);
				})
				.catch(() => {});
		},
		// 重置密码
		resetpass(id) {
			Api.resetpass({id:id}).then(res => {
				if(res.state){
					this.$message({
					  message: '重置密码成功',
					  type: 'success'
					});
				}else{
					this.$message(res.msg);
				}
			})
		},
		openSet(item) {
			this.setItem = item;
			this.isAdd = true;
		}
	}
};
</script>
<style lang="scss" scoped></style>

<style lang="scss">
.dialogVideo {
	.el-dialog__body {
		padding: 20px;
	}
}
</style>
